.upgrade{
    display: inline-flex;
    .create-card(@color-ui);
    text-align: left;
    width: 30%;
    padding: 0.5em 1em;

    div{
        width: 100%;
    }

    div.info{
        .buy, .effect{
            display: none;
        }
    }

    .effect{
        .create-text-outlined(@font-family-header, 0.1em, white, rgb(44, 44, 44));
        font-size: 150%;
        text-align: center;
        white-space: nowrap;
    }

    button.buy{
        font-size: 150%;
        white-space: nowrap;
        .create-text-outlined(@font-family-header, 0.09em);

        img{
            margin-right: 0.3em;
        }
    }
    
    @media (max-width: 1280px) {
        width: 42%;
    }

    @media (orientation: portrait) {
        width: 80%;
    }

    @media (max-width: 500px) {
        div.info{
            .buy, .effect{
                display: flex;
            }
        }

        div.buy{
            display: none;
        }
    }

    @media only screen and (min-width: 1280px){
        font-size: 80%;
        width: 23%;
    }
}

.upgrade-container{
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    flex-wrap: wrap;
}